<template>
  <div>
    <public-header-2></public-header-2>
    <div id="bodyMsg">
      <el-row id="head">
        <el-col :span="6">
          <span>1 选择商品</span>
          <div class="sanGray"></div>
        </el-col>
        <el-col :span="6">
          <span>2 确认订单信息</span>
          <div class="sanRed"></div>
        </el-col>
        <el-col :span="6">
          <span>3 支付订单</span>
        </el-col>
        <el-col :span="6">
          <span>4 收取商品</span>
        </el-col>
      </el-row>
      <order-yes-com>
        <div slot="info" class="info">
          <span>购票人：</span>
          <el-button type="danger">选择购票人</el-button>
        </div>
      </order-yes-com>
      <order-yes-com title="选择付款方式">
        <div slot="info" class="info">
          <el-radio class="radio" v-model="radio" label="1">网上付款</el-radio>
        </div>
      </order-yes-com>
    </div>
  </div>
</template>

<script>
import orderYesCom from "../components/orderYesCom.vue";
import publicHeader2 from "../components/publicHeader2.vue";
export default {
  name: "orderYes",
  components: {
    publicHeader2,
    orderYesCom,
  },
  data() {
    return {
      radio: "1",
    };
  },
};
</script>

<style scoped>
#bodyMsg {
  width: 80%;
  margin: 0 auto;
  /* border: 1px solid red; */
  background-color: white;
  padding: 15px;
}
/**选座头部三部分 */
#head .el-col {
  /* border: 1px solid blue; */
  height: 50px;
  background-color: #414141;
}
#head .el-col:nth-of-type(2) {
  background-color: #d8000b;
  height: 52px;
  margin-top: -1px;
}
#head .el-col span {
  line-height: 50px;
  color: white;
}
.sanGray {
  border-top: 25px solid transparent;
  border-left: 40px solid #414141;
  border-bottom: 25px solid transparent;
  position: relative;
  top: -50px;
  left: 307px;
}
.sanRed {
  border-top: 26.5px solid transparent;
  border-left: 45px solid #d8000b;
  border-bottom: 26.5px solid transparent;
  position: relative;
  top: -50px;
  left: 307px;
}
.info {
  margin-top: 15px;
}
.radio {
  float: left;
}

.el-radio__input.is-checked + .el-radio__label {
  color: #fd7624 !important;
}
.el-radio__input.is-checked .el-radio__inner {
  background: #fd7624 !important;
  border-color: #fd7624 !important;
}
</style>